<script setup lang="ts">
import { Layout, LayoutContent, LayoutHeader, LayoutSider } from 'ant-design-vue';

import AsideMenu from './components/aside-menu/index.vue';
import PageHeader from './components/header/index.vue';
import MainView from './components/main/index.vue';
import TabsView from './components/tabs-view/index.vue';
import Logo from './components/logo/index.vue';

import { useAppSettingsStore } from '@/fierce/stores/app-settings';

defineOptions({
  name: 'Layouts',
});

const appSettingsStore = useAppSettingsStore();
console.log('🚀 ----- appSettingsStore', appSettingsStore);
// const menuSettings = appSettingsStore.menuSettings;
// const tabsViewSettings = appSettingsStore.tabsViewSettings;
// const headerSettings = appSettingsStore.headerSettings;

const collapsed = ref(false);
</script>

<template>
  <Layout class="layout" has-sider>
    <LayoutSider class="layout-sider" theme="light" :collapsed="collapsed">
      <Logo :collapsed="collapsed" />
      <AsideMenu />
    </LayoutSider>

    <Layout>
      <LayoutHeader class="layout-header">
        <PageHeader v-model:collapsed="collapsed" />
      </LayoutHeader>
      <TabsView />

      <LayoutContent>
        <MainView />
      </LayoutContent>
      <!-- TODO BackTop  -->
    </Layout>
  </Layout>
</template>

<style scoped lang="less">
.layout {
  display: flex;
  flex-direction: row;
  flex: auto;

  .layout-sider {
    min-height: 100vh;
    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    position: relative;
    z-index: 13;
    transition: all 0.2s ease-in-out;
  }

  .layout-header {
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
}
</style>
